<template>
  <div class="container">
    <el-form
      :inline="true"
      label-width="80px"
      label-position="left"
      size="mini"
      class="demo-form-inline"
      style="padding-top: 18px;"
      @submit.native.prevent
    >
      <el-form-item label="手机号码">
        <el-input clearable placeholder="手机号码" v-model="searchForm.phone" class="the-input"></el-input>
      </el-form-item>
      <el-form-item label="用户ID">
        <el-input clearable placeholder="用户ID" class="the-input" v-model="searchForm.userId"></el-input>
      </el-form-item>
      <el-form-item label="优惠券状态">
        <!--0有效、1已使用、2已过期、3已作废,4 已锁定-->
        <el-select v-model="searchForm.state">
          <el-option value label="请选择"></el-option>
          <el-option :value="0" label="有效"></el-option>
          <el-option :value="1" label="已使用"></el-option>
          <el-option :value="2" label="已过期"></el-option>
          <el-option :value="3" label="已作废"></el-option>
          <el-option :value="4" label="已锁定"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="批次ID">
        <el-input clearable placeholder="批次ID" v-model="searchForm.batchId" class="the-input"></el-input>
      </el-form-item>
      <el-form-item label="优惠券券码">
        <el-input clearable placeholder="优惠券券码" v-model="searchForm.couponsCode" class="the-input"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit" @click="doSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" height="300" border size="small" stripe>
      <el-table-column fixed type="index" width="55" align="center" label="序号"></el-table-column>
      <el-table-column prop="couponsCode" label="优惠券券码" width="180"></el-table-column>
      <el-table-column prop="batchType" label="优惠券类型" width="180">
        <template slot-scope="{row}">{{row.batchType === 0?'现金券':'满减券'}}</template>
      </el-table-column>
      <el-table-column prop="batchMoney" label="优惠券金额/折扣" width="180"></el-table-column>
      <el-table-column prop="limitMoney" label="优惠券限额" width="180"></el-table-column>
      <el-table-column prop="startTime" label="有效时间" width="280">
        <template slot-scope="{row}">{{row.startTime + '-'+ row.endTime}}</template>
      </el-table-column>
      <el-table-column prop="beginTime" label="发放时间" width="180"></el-table-column>
      <el-table-column prop="batchId" label="批次ID" width="180"></el-table-column>
      <el-table-column prop="state" label="状态" width="180">
        <template slot-scope="{row}">{{row.state | statusFilter }}</template>
      </el-table-column>
      <el-table-column fixed="right" prop label="操作" width="280" align="center">
        <template slot-scope="scope">
          <el-button type="text" v-if="scope.row.state === 0" size="small" @click="doCancel(scope.row)">作废</el-button>
          <el-button type="text" size="small" @click="showLog(scope.row)">日志</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-area" style>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        :current-page.sync="pageIndex"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        :page-count="pageCount"
      ></el-pagination>
    </div>
    <el-dialog title="优惠券全流程查看" :visible.sync="dialogVisible" width="1000px">
      <table class="table-detail">
        <tr>
          <th>优惠券类型</th>
          <td>{{row.batchType === 0?'现金券':'满减券'}}</td>
          <th>优惠券状态</th>
          <td>{{row.state | statusFilter }}</td>
          <th>优惠券金额/折扣</th>
          <td>{{row.batchMoney? row.batchMoney:0}}</td>
          <th>优惠券限额</th>
          <td>{{row.limitMoney}}</td>
        </tr>
        <tr>
          <th>批次ID</th>
          <td colspan="3"><a href="javascript:void(0)" style="color:#409EFF;" @click="toDetail(row.id)">{{row.id}}</a></td>
          <th>批次名称</th>
          <td colspan="3">{{row.batchName?row.batchName:''}}</td>
        </tr>
        <tr>
          <th>优惠券有效期</th>
          <td colspan="7">{{row.startTime + '-'+ row.endTime}}</td>
        </tr>
      </table>
      <el-table :data="couponsData" border size="small" stripe height="200">
        <el-table-column width="50" type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="createName" label="操作人"></el-table-column>
        <el-table-column prop="operateDesc" label="操作类型"></el-table-column>
        <el-table-column prop="remark" label="操作说明"></el-table-column>
        <!--20200811-经过与许云飞沟通 状态字段取值由operateType改为couponsState-->
        <!-- <el-table-column prop="operateType" label="状态" :formatter="operateTypeFormat"></el-table-column> -->
        <el-table-column prop="couponsState" label="状态" :formatter="couponsStateFormat"></el-table-column>
        <el-table-column prop="createTime" label="时间"></el-table-column>
      </el-table>
      <div class="pagination-area">
        <el-pagination
          background
          @size-change="handleLogSizeChange"
          @current-change="handleLogCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="logParams.pageSize"
          :current-page.sync="logParams.pageIndex"
          layout="total, sizes, prev, pager, next, jumper"
          :total="logParams.totalCount"
          :page-count="logParams.pageCount"
        ></el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <coupon-dialog ref="couponDialog"/>
  </div>
</template>

<script>
import {
  getQueryList,
  setCancellation,
  getCouponsLog,
  getActivityLog,
  getCancellationCouponsLog,
  getCancellationCouponDetail
} from '@/api/coupon'
import CouponDialog from './components/coupon-dialog';
export default {
  name: "couponSearch",
  components: {
    'coupon-dialog': CouponDialog
  },
  filters: {
    statusFilter(val) {
      const map = {
        0: "有效",
        1: "已使用",
        2: "已过期",
        3: "已作废",
        4: "已锁定",
      };
      return map[val];
    },
  },
  data() {
    return {
      row: {},
      couponsData: [],
      searchForm: {
        phone: "",
        couponsCode: "",
        batchId: "",
        userId: "",
        state: "",
      },
      logParams: {
        pageIndex: 1,
        pageSize: 10,
        // 总条目数
        totalCount: 100,
        // 总页数
        pageCount: 0,
        rowId: "",
      },
      dialogVisible: false,
      pageSize: 10,
      pageCount: 0,
      totalCount: 0,
      pageIndex: 1,
      tableData: [],
    };
  },
  methods: {
    toDetail (id) {
      // this.$router.push({
      //   path: "/showconfig",
      //   query: {
      //     viewType: "detail",
      //     couponId: id
      //   },
      // });
      this.$refs.couponDialog.detail(id, '');
    },
    couponsStateFormat(row, column, cellValue, index) {
      // 0有效、1已使用、2已过期、3已作废、4已锁定
      if (cellValue === 0) {
        return "有效";
      } else if (cellValue === 1) {
        return "已使用";
      } else if (cellValue === 2) {
        return "已过期";
      } else if (cellValue === 3) {
        return "已作废";
      } else {
        return "已锁定";
      }
      return "";
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageIndex = 1;

      this.getQueryList();
    },
    handleCurrentChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.getQueryList();
    },
    onSubmit() {
      console.log("submit!");
    },
    doCancel(row) {
      this.$confirm("请确认是否作废当前优惠券？", "作废确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const res = await setCancellation(row.couponsCode);
        console.log(res);
        if (res.code === 200) {
          this.$message.success(res.message);
          this.getQueryList();
        } else {
          this.$message.error("操作失败");
        }
      });
    },
    handleLogSizeChange(pageSize) {
      this.logParams.pageSize = pageSize;
      this.logParams.pageIndex = 1;

      this.getLogs();
    },
    handleLogCurrentChange(pageIndex) {
      this.logParams.pageIndex = pageIndex;
      this.getLogs();
    },
    async getLogs() {
      const res = await getCancellationCouponsLog(
        this.logParams.pageIndex,
        this.logParams.pageSize,
        this.row.couponsCode
      );
      if (res.code === 200) {
        this.couponsData = res.result.records;
        this.logParams.totalCount = res.result.total;
        this.logParams.pageCount = res.result.pages;
      } else {
        this.couponsData = [];
      }
    },
    async showLog(row) {
      // this.row = row;
      const detail = await getCancellationCouponDetail(row.couponsCode);
      if (detail.code === 200) {
        this.row = detail.result;
      }
      // console.log(detail);
      const res = await getCancellationCouponsLog(
        this.logParams.pageIndex,
        this.logParams.pageSize,
        row.couponsCode
      );
      if (res.code === 200) {
        this.couponsData = res.result.records;
        this.logParams.totalCount = res.result.total;
        this.logParams.pageCount = res.result.pages;
      } else {
        this.couponsData = [];
      }

      this.dialogVisible = true;
    },
    getQueryList() {
      const loading = this.$loading({
        lock: true,
        text: "请稍等...",
      });
      getQueryList(this.pageIndex, this.pageSize, this.searchForm)
        .then((res) => {
          loading.close();
          this.tableData = res.result.records;
          this.totalCount = res.result.total;
          this.pageCount = res.result.pages;
        })
        .catch(() => {
          this.tableData = [];
          this.totalCount = 0;
          this.pageCount = 0;
        });
    },
    doSearch() {
      this.pageIndex = 1;
      this.getQueryList();
    },
  },
  mounted() {
    this.doSearch();
  },
};
</script>

<style lang="scss" scoped>
.table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  border-color: #ebeef5;
  td {
    border: 1px solid #ebeef5;
    max-width: 220px !important;
    padding: 7px 0;
    padding-left: 10px;
  }
}
.table-detail {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  border-color: #ebeef5;
  th {
    width: 150px;
    text-align: left;
    font-weight: normal;
    background: #f2f2f2;
  }
  th,
  td {
    border: 1px solid #ebeef5;
    max-width: 220px !important;
    padding: 7px 0;
    padding-left: 10px;
    font-size: 12px;
  }
}
</style>